<template>
  <div class="about">
    <el-row style="width: 85vw;">
      <el-col>
        <el-tabs :tab-position="tabPosition" type="border-card" class>
          <el-tab-pane label="作者信息">
            <span slot="label">
              <i class="el-icon-info"></i>作者信息
            </span>

            <el-card>
              <div slot="header" class="clearfix">
                <!-- 标题 -->
                <span>作者信息</span>
              </div>
              <!-- 信息展示 -->
              <el-row style="margin-top:16px;" :gutter="10">
                <el-col :span="8">
                  <el-card :body-style="{ padding: '0px' }">
                    <img src="../assets/me0.jpeg" alt="我的照片" class="image">
                    <div style="padding:14px;">
                      <span>꧁༺ད小༒军ཌ༻꧂</span>
                      <div class="bottom clearfix">
                        <time class="time">{{dateFormat()}}</time>
                        <el-button type="text" class="button" v-on:click="showMyInfo">详细信息</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="15" v-if="isShowMyInfo" style="text-align: left;">
                  <el-card>姓名：小军
                    <br>邮箱：zhj1214@hotmail.com
                    <br>博客分类：iOS开发、小程序开发、公众号开发、vue开发、swift后台开发
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="内容介绍">
            <span slot="label">
              <i class="el-icon-document"></i>内容介绍
            </span>
            <el-card>
              <div slot="header" class="clearfix">
                <!-- 标题 -->
                <span>内容介绍</span>
              </div>
              {{contentDesc}}
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="浏览新闻">
            <span slot="label">
              <i class="el-icon-view"></i>浏览新闻
            </span>

            <el-card>
              <div slot="header" class="clearfix">
                <!-- 标题 -->
                <span>浏览新闻</span>
              </div>
              <el-row :gutter="12">
                <el-col v-for="(item,index) in newsTitle" :key="index" :span="6" class="newsItem">
                  <el-button
                    @click="clickNews(item.url)"
                    :type="getbuttonStyle()"
                    plain
                  >{{item.title}}</el-button>
                </el-col>
              </el-row>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="问题反馈">
            <span slot="label">
              <i class="el-icon-phone-outline"></i>问题反馈
            </span>
            <el-card>
              <div slot="header" class="clearfix">
                <!-- 标题 -->
                <span>问题反馈</span>
              </div>
              <el-row>如有任何问题请骚扰邮箱：
                <br>zhj1214@hotmail.com
              </el-row>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import common from "../common/common.js";

export default {
  data() {
    return {
      tabPosition: "left",
      contentDesc:
        "目前这是一个我个人的vue练习项目，目的是为了让我能更好的进行vue学习开发",
      isShowMyInfo: false,
      newsTitle: [
        { title: "今日头条", url: "https://www.toutiao.com/" },
        { title: "百度", url: "https://www.baidu.com/" },
        { title: "中关村科技", url: "http://www.zol.com.cn/" },
        { title: "zealer", url: "http://www.zealer.com/" },
        { title: "牛巴巴vip解析", url: "http://mv.688ing.com/" },
        {
          title: "vue-cli3全面配置",
          url: "https://segmentfault.com/a/1190000017008697"
        },
        { title: "element-ui", url: "http://element-cn.eleme.io/#/zh-CN" }
      ],
      newsTitleStyle: ""
    };
  },
  methods: {
    clickNews(name) {
      window.location.href = name;
    },
    getbuttonStyle() {
      var newsTitleStyles = [
        "primary",
        "success",
        "info",
        "warning",
        "danger",
        ""
      ];
      var sty = newsTitleStyles[common.randomNum(0, 6)];
      return sty;
    },
    showMyInfo: function() {
      console.log("展示我的信息");
      this.isShowMyInfo = !this.isShowMyInfo;
    },
    //   时间格式化
    dateFormat: function(time) {
      var date = time || new Date();
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    }
  }
};
</script>

<style>
.about {
  display: flex;
  justify-content: center;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.image {
  width: 100%;
  display: block;
}
.time {
  font-size: 13px;
  color: #999;
}
.button {
  padding: 0;
  float: right;
}

.newsItem {
  margin: 12px auto;
  padding: 6px auto;
}
</style>
